<template>
  <PageContainer>
    <Header title="好友申请详情" :is-box-shadow="false" />
    <view v-if="data" class="hb-bg-white">
      <ApplyStatusView :status="data?.reviewStatus" :create-time="data?.createTime" type="friend" />
      <view class="hb-flex hb-items-center hb-p-3">
        <TmImage
          class="hb-flex-shrink-0"
          :src="data?.iconFileUrl"
          :width="96"
          :height="96"
          :round="4"
        />
        <view class="hb-flex-1 hb-mx-3 hb-h-12 hb-flex hb-flex-col hb-justify-between">
          <view class="hb-flex-1 hb-flex hb-items-center hb-justify-between">
            <TmText
              _class="text-overflow-1 hb-font-bold"
              :label="data?.applyName"
              :font-size="32"
            />
            <TmButton
              class="hb-flex-shrink-0"
              :margin="[0, 0]"
              :padding="[16, 0]"
              :block="true"
              color="primary"
              font-color="primary"
              :height="48"
              :font-size="24"
              outlined
              :round="16"
              label="查看名片"
              @click="handleViewCard"
            />
          </view>
          <!-- 认证 -->
          <AuthenticationTag :certification-type="data?.certificationType" />
        </view>
      </view>
      <view class="hb-bg-[#F2F3F5] hb-p-2 hb-m-4 hb-rounded-lg">
        <TmText :label="data?.applyContent || '无'" color="#646566" :font-size="28" />
      </view>
      <view
        class="hb-fixed hb-bottom-0 hb-left-0 hb-w-full hb-px-4 hb-py-3 hb-bg-white hb-flex hb-items-center hb-gap-3"
      >
        <TmButton
          class="hb-flex-1"
          :margin="[0, 0]"
          :padding="[0, 0]"
          label="联系ta"
          :follow-theme="false"
          color="#fff"
          :border="1"
          border-color="#C8CACC"
          :round="16"
          :font-size="28"
          :height="88"
          :block="data?.reviewStatus !== ReviewStatusEnum.PENDING"
          @click="handleContact"
        />
        <TmButton
          v-if="data?.reviewStatus === ReviewStatusEnum.PENDING"
          class="hb-flex-1"
          :margin="[0, 0]"
          :padding="[0, 0]"
          label="驳回申请"
          :follow-theme="false"
          color="#EA5E0E"
          :round="16"
          :font-size="28"
          :height="88"
          @click="handleReject"
        />
        <TmButton
          v-if="data?.reviewStatus === ReviewStatusEnum.PENDING"
          class="hb-flex-1"
          :margin="[0, 0]"
          :padding="[0, 0]"
          label="同意申请"
          color="primary"
          :round="16"
          :font-size="28"
          :height="88"
          @click="handleAgree"
        />
      </view>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* friendApplyDetail 好友申请详情 */
  import { auditFriendApply, friendApplyDetail } from '@/api/contact';
  import { FriendApplyDetailResult } from '@/api/contact/types';
  import { ReviewStatusEnum } from '@/enums/PublicEnum';
  import { FriendApplyDetail } from '@/router/types/modules';
  import { Toast } from '@/utils';
  import ApplyStatusView from '../components/ApplyStatusView.vue';

  const data = ref<FriendApplyDetailResult>();
  const id = ref<number>();
  let success: FriendApplyDetail['success'];

  customOnload<'friendApplyDetail'>((op) => {
    id.value = op.id;
    getFriendApplyDetail();
    success = op.success;
  });

  function getFriendApplyDetail() {
    friendApplyDetail({ id: id.value! }).then((res) => {
      data.value = res;
    });
  }

  const handleContact = () => {
    if (data.value?.applyPersonPhone) {
      uni.makePhoneCall({
        phoneNumber: data.value.applyPersonPhone,
      });
    } else {
      Toast('对方暂未填写联系方式');
    }
  };

  const handleReject = () => {
    uni.showModal({
      title: '驳回申请',
      content: '确定要拒绝ta的好友请求？',
      cancelColor: '#969799',
      cancelText: '取消',
      confirmColor: '#EA5E0E',
      confirmText: '确定',
      success: (res) => {
        if (res.confirm) {
          handleSuccess(ReviewStatusEnum.REJECTED);
        }
      },
    });
  };
  const handleAgree = () => {
    uni.showModal({
      title: '同意申请',
      content: '确定同意与ta成为好友？',
      cancelColor: '#969799',
      cancelText: '取消',
      confirmColor: '#2878FF',
      confirmText: '确定',
      success: (res) => {
        if (res.confirm) {
          handleSuccess(ReviewStatusEnum.APPROVED);
        }
      },
    });
  };

  function handleSuccess(reviewStatus: ReviewStatusEnum) {
    auditFriendApply({ id: data.value!.id, reviewStatus }).then(() => {
      Toast('操作成功');
      getFriendApplyDetail();
      success?.();
    });
  }

  const handleViewCard = () => {
    navigateTo({
      name: 'cardDetail',
      options: { uuid: data.value!.uuid },
    });
  };
</script>

<style lang="scss" scoped></style>
